<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
  <title>服务记录 - 活力长者社区</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    .history-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px;
    }

    .history-header {
      margin-bottom: 30px;
    }

    .history-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      padding: 25px;
      margin-bottom: 25px;
    }

    .card-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e9ecef;
    }

    .table th {
      font-weight: 600;
      background-color: #f8f9fa;
    }

    .status-badge {
      padding: 5px 10px;
      border-radius: 15px;
      font-size: 0.85rem;
    }

    .status-completed {
      background-color: #d1e7dd;
      color: #0f5132;
    }

    .status-pending {
      background-color: #fff3cd;
      color: #856404;
    }

    .status-cancelled {
      background-color: #f8d7da;
      color: #842029;
    }

    .btn-request {
      background-color: #28a745;
      color: white;
      padding: 8px 20px;
      border-radius: 5px;
      text-decoration: none;
      display: inline-block;
      margin-bottom: 20px;
    }

    .btn-request:hover {
      background-color: #218838;
      color: white;
    }

    .action-link {
      color: #007bff;
      text-decoration: none;
      margin-right: 15px;
    }

    .action-link:hover {
      text-decoration: underline;
    }

    .empty-state {
      text-align: center;
      padding: 50px 0;
    }

    .empty-icon {
      font-size: 5rem;
      color: #e9ecef;
      margin-bottom: 20px;
    }

    .empty-title {
      font-size: 1.5rem;
      margin-bottom: 15px;
    }

    .empty-text {
      color: #6c757d;
      max-width: 500px;
      margin: 0 auto 30px;
    }
  </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="history-container">
  <div class="history-header">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h2>服务记录</h2>
        <p class="text-muted mb-0">查看您的服务申请历史</p>
      </div>
      <a href="ServiceRequestServlet" class="btn-request">
        <i class="bi bi-plus-circle"></i> 申请新服务
      </a>
    </div>
  </div>

  <c:if test="${not empty error}">
    <div class="alert alert-danger">${error}</div>
  </c:if>

  <div class="history-card">
    <h3 class="card-title">服务记录列表</h3>

    <c:choose>
      <c:when test="${not empty serviceHistory}">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
            <tr>
              <th>服务对象</th>
              <th>服务类型</th>
              <th>服务时间</th>
              <th>服务时长</th>
              <th>服务管家</th>
              <th>状态</th>
              <%--<th>操作</th>--%>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${serviceHistory}" var="record">
              <tr>
                <td>${record.occupantName}</td>
                <td>${record.serviceType}</td>
                <td>
                  <fmt:formatDate value="${record.serviceTime}" pattern="yyyy-MM-dd HH:mm"/>
                </td>
                <td>${record.serviceDuration}分钟</td>
                <td>张管家</td>
                <td>
                  <c:choose>
                    <c:when test="${record.serviceStatus == 0}">
                      <span class="status-badge status-pending">进行中</span>
                    </c:when>
                    <c:otherwise>
                      <span class="status-badge status-completed">已完成</span>
                    </c:otherwise>
                  </c:choose>
                </td>
               <%-- <td>
                  <a href="#" class="action-link">查看详情</a>
                  <c:if test="${record.serviceStatus == 0}">
                    <a href="#" class="action-link">取消</a>
                  </c:if>
                </td>--%>
              </tr>
            </c:forEach>
            </tbody>
          </table>
        </div>
      </c:when>
      <c:otherwise>
        <div class="empty-state">
          <div class="empty-icon">
            <i class="bi bi-clipboard"></i>
          </div>
          <h3 class="empty-title">暂无服务记录</h3>
          <p class="empty-text">
            您尚未申请任何生活服务，请点击下方按钮申请新服务。
          </p>
          <a href="ServiceRequestServlet" class="btn btn-primary">申请新服务</a>
        </div>
      </c:otherwise>
    </c:choose>
  </div>
</div>

<c:import url="footer.jsp" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>